<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>-->
    <style>
        body{
            background: #eee;
        }
        .dateinputer>div{
            line-height:40px;
            height:40px;
            margin:10px 0;
            border:1px solid #ccc;
            cursor: pointer;
            position:relative;
            /*top:10px;*/
            /*left:20px;*/
            padding:0 6px;
            font-size: 12px !important;

        }
        #multiple{
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .flex-div{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-flow: column;
            margin-left:30px;
            margin-top:20px;
            font-size: 16px;
        }
        .flex-div>span{
            display: block;
            margin-bottom: 10px;
        }
        .dateinputer-mobile{
            line-height: 32px;
        }
        .xndatepicker-mobile-input>div{
            border:1px solid #ccc;

        }
        .xndatepicker-mobile-input .input{
            min-width: 100px;
        }
        h4{
            font-size: 28px;
            line-height: 2;
            margin-top: 40px;
            margin-bottom: 0;
            margin-left: 30px;
        }
    </style>
<!--    <link rel="stylesheet" href="./src/xndatepickermobile.css">-->
</head>

<body>
<h4>手机端</h4>
<div class="flex-div">
    <span>date 年月日选择器-手机端</span>
    <div id='mobile-date' class="dateinputer-mobile">

    </div>
</div>
<div class="flex-div">
    <span>daterange 日期区间选择器-手机端</span>
    <div id='mobile-daterange' class="dateinputer-mobile">

    </div>
</div>
<div class="flex-div">
    <span>datetime 日期选择器-手机端</span>
    <div id='mobile-datetime' class="dateinputer-mobile">

    </div>
</div>
<div class="flex-div">
    <span>datetime 仅时间选择器-手机端</span>
    <div id='mobile-datetime1' class="dateinputer-mobile">

    </div>
</div>
<div class="flex-div">
    <span>month 年月选择器-手机端</span>
    <div id='mobile-month' class="dateinputer-mobile">

    </div>
</div>
<div class="flex-div">
    <span>weeknum 周次选择器-手机端</span>
    <div id='mobile-weeknum' class="dateinputer-mobile">

    </div>
</div>
<h4>PC端</h4>
<div class="flex-div">
    <span>weeknum 周次选择器</span>
    <div id='weeknum' class="dateinputer">

    </div>
</div>

<div class="flex-div">
    <span>weeknumrange 周次区间选择器</span>
    <div id='weeknumrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>date 单日选择器+设置不可选日期</span>
    <a id="destroy">销毁日历</a>
    <div id='date' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>datetime 单日加时间选择器</span>
    <div id='datetime' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>month 月选择器</span>
    <div id='month' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>year 年选择器</span>
    <div id='year' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>daterange 日期区间选择器</span>
    <div id='daterange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>monthrange 月区间选择器</span>
    <div id='monthrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>yearrange 年区间选择器</span>
    <div id='yearrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>week 周选择器</span>
    <div id='week' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>multiple 多日期选择器-自定义shortcut</span>
    <div id='multiple' class="dateinputer">

    </div>
</div>
</body>
<!--<script type="text/javascript" src="./dist/xndatepicker.min.js"></script>-->
<!--<script src="./src/iscroll.js"></script>-->
<script type="module">

    var mobiledate=new XNDatepicker(document.querySelector("#mobile-date"),{
        // format:'YYYY-MM-DD HH:mm',
        isMobile:true,
        // format:'HH:mm:ss',
        type:'date',//year/month/date/ datetime/datetimerange/ daterange/monthrange/yearrange/weeknum
        // scrolllist:['hour','minute','second'],
        // multipleDates:[],//当为多选日期类型时的初始值
        // startTime:'2021-1-24 11',
        endTime:'2036-04-04',
        minDate:'2019-04-04',
        placeholder:{startTime:'请选择日期',endTime:'结束周'},
        maxDate:'2022-01-01',
        separator:' 至 ',
        // showType:'modal',
        // linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    mobiledate.on('scrollEnd',e=>{
        console.log(e);
    })
    mobiledate.resetDate('2020-03-24')

    var mobiledatetime1=new XNDatepicker(document.querySelector("#mobile-datetime1"),{
        // format:'YYYY-MM-DD HH:mm',
        isMobile:true,
        format:'HH:mm:ss',
        type:'datetime',//year/month/date/ datetime/datetimerange/ daterange/monthrange/yearrange/weeknum
        scrolllist:['hour','minute','second'],
        // multipleDates:[],//当为多选日期类型时的初始值
        // startTime:'2021-1-24 11',
        endTime:'2036-04-04',
        minDate:'2019-04-04',
        placeholder:{startTime:'开始时间',endTime:'结束时间'},
        maxDate:'2022-01-01',
        separator:' 至 ',
        // showType:'modal',
        // linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })

    var mobiledaterange=new XNDatepicker(document.querySelector("#mobile-daterange"),{
        // format:'YYYY-MM-DD HH:mm',
        isMobile:true,
        type:'daterange',//year/month/date/ datetime/datetimerange/ daterange/monthrange/yearrange/weeknum
        // scrolllist:['hour','minute','second'],
        // multipleDates:[],//当为多选日期类型时的初始值
        // startTime:'2021-1-24 11',
        theme:'pink',
        endTime:'2036-04-04',
        minDate:'2019-04-04',
        placeholder:{startTime:'开始时间',endTime:'结束时间'},
        maxDate:'2022-01-01',
        separator:' 到 ',
        // showType:'modal',
        // linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })


    var mobilemonth=new XNDatepicker(document.querySelector("#mobile-month"),{
        // format:'YYYY-MM-DD HH:mm',
        isMobile:true,
        type:'month',//year/month/date/ datetime/datetimerange/ daterange/monthrange/yearrange/weeknum
        // scrolllist:['hour','minute','second'],
        // multipleDates:[],//当为多选日期类型时的初始值
        // startTime:'2021-1-24 11',
        theme:'orange',
        endTime:'2036-04-04',
        minDate:'2019-04-04',
        placeholder:{startTime:'开始时间',endTime:'结束时间'},
        maxDate:'2022-01-01',
        separator:' 到 ',
        // showType:'modal',
        // linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })


    var mobiledatetime=new XNDatepicker(document.querySelector("#mobile-datetime"),{
        // format:'YYYY-MM-DD HH:mm',
        isMobile:true,
        type:'datetime',//year/month/date/ datetime/datetimerange/ daterange/monthrange/yearrange/weeknum
        // scrolllist:['hour','minute','second'],
        // multipleDates:[],//当为多选日期类型时的初始值
        // startTime:'2021-1-24 11',
        theme:'green',
        endTime:'2036-04-04',
        minDate:'2019-04-04',
        placeholder:{startTime:'开始时间',endTime:'结束时间'},
        maxDate:'2022-01-01',
        separator:' 到 ',
        // showType:'modal',
        // linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })


    var mobileweeknum=new XNDatepicker(document.querySelector("#mobile-weeknum"),{
        // format:'YYYY-MM-DD HH:mm',
        isMobile:true,
        type:'weeknum',//year/month/date/ datetime/datetimerange/ daterange/monthrange/yearrange/weeknum
        // scrolllist:['hour','minute','second'],
        // multipleDates:[],//当为多选日期类型时的初始值
        // startTime:'2021-1-24 11',
        theme:'blue',
        endTime:'2036-04-04',
        minDate:'2019-04-04',
        placeholder:{startTime:'请选择周',endTime:'结束周'},
        maxDate:'2022-01-01',
        separator:' 到 ',
        // showType:'modal',
        // linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })


    var dateweeknum=new XNDatepicker(document.querySelector("#weeknum"),{
        // format:'YYYY-MM-DD',
        type:'weeknum',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'2021-01-24',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        placeholder:{startTime:'起始周',endTime:'结束周'},
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:false,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data.startTime.format('YYYY-MM-DD'))
    })

    var dateweeknumrange=new XNDatepicker(document.querySelector("#weeknumrange"),{
        // format:'YYYY-MM-DD',
        type:'weeknumrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'2021-01-24',
        placeholder:{startTime:'起始周',endTime:'结束周'},
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
        disableDate:function(date,dayjs,calcType){//还未对初始时间做处理
            return false;
        },
    },function(data){
        console.log(data)
    })
    var date=new XNDatepicker(document.querySelector("#date"),{
        // format:'YYYY-MM-DD',
        type:'date',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'2019-04-04',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
        theme:'blue',
        disableDate:function(date,dayjs,calcType){//还未对初始时间做处理
            if(dayjs(date).format('YYYY')=='2019')//当前是2019年时不可选
                return true;
            if(calcType=='month' && dayjs(date).format('MM')=='09')//当当前显示的是月选择器，而且月份为09的时候不可选
                return true;
            return false;
        },
    },function(data){
        console.log(data)
    })
    date.resetDate('2020-03-24')
    document.querySelector("#destroy").click(function(){
        date.destroy();
    })
    var datetime=new XNDatepicker(document.querySelector("#datetime"),{
        // format:'YYYY-MM-DD',
        type:'datetime',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'2019-04-04',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        theme:'pink',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    var month=new XNDatepicker(document.querySelector("#month"),{
        // format:'YYYY-MM-DD',
        type:'month',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    var year=new XNDatepicker(document.querySelector("#year"),{
        // format:'YYYY-MM-DD',
        type:'year',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    var daterange=new XNDatepicker(document.querySelector("#daterange"),{
        // format:'YYYY-MM-DD',
        type:'daterange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        theme:'green',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    var monthrange=new XNDatepicker(document.querySelector("#monthrange"),{
        // format:'YYYY-MM-DD',
        type:'monthrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    var yearrange=new XNDatepicker(document.querySelector("#yearrange"),{
        // format:'YYYY-MM-DD',
        type:'yearrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
    var week=new XNDatepicker(document.querySelector("#week"),{
        // format:'YYYY-MM-DD',
        type:'week',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        theme:'orange',
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    })
var multiple=new XNDatepicker(document.querySelector("#multiple"),{
    // format:'YYYY-MM-DD',
    type:'multiple',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    multipleDates:[],//当为多选日期类型时的初始值
    startTime:'',
    // endTime:'2036-04-04',
    minDate:'2019-04-04',
    maxDate:'',
    separator:' 到 ',
    showType:'modal',
    linkPanels:false,//面板联动
    showClear:true,//是否显示清除按钮
    autoConfirm:true,
    showShortKeys:true,
    autoFillDate:true,//自动变更element里面的值
    shortList:[
        {
            name: "某三天",
            value: { startTime: ['2021/02/01','2021-02-05','2020-01-08']}
        },
        {
            name: "今天",
            value: { startTime: '2021/02/01'}
        }
    ]
},function(data){
    console.log(data)
})
</script>
<!--<script src="http://10.1.100.207:8081/target/target-script-min.js#anonymous"></script>-->
</html>
